import React from 'react';
import { Card, Button, Dropdown, Space, Typography } from 'antd';
import { DownloadOutlined, MoreOutlined, FullscreenOutlined, ReloadOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const { Title } = Typography;

interface ChartCardProps {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  loading?: boolean;
  onRefresh?: () => void;
  onExport?: () => void;
  onFullscreen?: () => void;
  extra?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export default function ChartCard({
  title,
  subtitle,
  children,
  loading = false,
  onRefresh,
  onExport,
  onFullscreen,
  extra,
  className,
  style
}: ChartCardProps) {
  const menuItems: MenuProps['items'] = [
    {
      key: 'refresh',
      label: '刷新数据',
      icon: <ReloadOutlined />,
      onClick: onRefresh,
      disabled: !onRefresh
    },
    {
      key: 'export',
      label: '导出图片',
      icon: <DownloadOutlined />,
      onClick: onExport,
      disabled: !onExport
    },
    {
      key: 'fullscreen',
      label: '全屏查看',
      icon: <FullscreenOutlined />,
      onClick: onFullscreen,
      disabled: !onFullscreen
    }
  ];

  const cardExtra = (
    <Space>
      {extra}
      {(onRefresh || onExport || onFullscreen) && (
        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      )}
    </Space>
  );

  return (
    <Card
      className={className}
      style={style}
      loading={loading}
      title={
        <div>
          <Title level={4} style={{ margin: 0 }}>
            {title}
          </Title>
          {subtitle && (
            <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
              {subtitle}
            </div>
          )}
        </div>
      }
      extra={cardExtra}
      bodyStyle={{ padding: '16px' }}
    >
      {children}
    </Card>
  );
}

// 导出类型
export type { ChartCardProps };